<!--
 * @Date: 2022-02-24 19:09:42
 * @Author: 陶子
 * @LastEditTime: 2023-06-12 14:26:05
 * @FilePath: \jk_one-stop_pc\src\views\workManagement\workOrder\workOrderDetail.vue
 * @pageName: 这是--(报工详情)--页面
-->
<template>
  <jke-modal :visible.sync="jkeForm.visible" :width="1200" :title="jkeForm.title" :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen">
    <div class="page-scroll-wrap">
      <div>
        <div>
          <a-card title="" :bordered="false" style="margin-top: 12px">
            <div class="box">
              <div class="box-column">
                <div class="boeay">
                  <div>工单编号</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
                <div class="boeay">
                  <div>工序</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
                <div class="boeay">
                  <div>任务时间</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
              </div>
              <div class="box-column">
                <div class="boeay">
                  <div>关联订单</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
                <div class="boeay">
                  <div>生产状态</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
                <div class="boeay">
                  <div>计划数</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
              </div>
              <div class="box-column">
                <div class="boeay">
                  <div>生产物品信息</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
                <div class="boeay">

                </div>
                <div class="boeay">
                  <div>任务进度</div>
                  <p>{{ workOrderInfo.workOrderCode || '-' }}</p>
                </div>
              </div>
              <div class="box-column qr">
                <div style="width: 120px;">
                  <vue-qr :text="JSON.stringify({ id: detailData.id, EntityType: 'workOrder' })" :size="120"
                    :margin="0"></vue-qr>
                </div>
              </div>
            </div>
          </a-card>
          <a-card title="" :bordered="false" style="margin-top: 12px">
            <a-tabs default-active-key="1">
              <a-tab-pane key="1" tab="报工信息">
                <div class="body-box">
                  <div class="num">
                    <div class="box-num">
                      <div class="topnum">报工数</div>
                      <div class="bomnum">100,000</div>
                    </div>
                    <div class="box-num">
                      <div class="topnum">报工数</div>
                      <div class="bomnum">100,000</div>
                    </div>
                    <div class="box-num">
                      <div class="topnum">报工数</div>
                      <div class="bomnum">100,000</div>
                    </div>
                  </div>
                  <div class="body-table">
                    <a-table :scroll="{ x: scrollX, y: '350px' }" :pagination="false" :columns="columns"
                      :data-source="data">
                      <a slot="name" slot-scope="text">{{ text }}</a>
                    </a-table>
                    <div class="uni-card parion" :style="{ left: collapsed ? '219px' : '90px' }">
                      <div class="check-contain">
                        <span>
                          {{ `共 ${total} 条` }}
                        </span>
                      </div>
                      <div class="page-contain">
                        <a-pagination :total="total" v-model="current" :page-size-options="pageSizeOptions"
                          :page-size="pageSize" @change="onChangePage" @showSizeChange="onShowSizeChange"
                          show-quick-jumper show-size-changer />
                      </div>
                    </div>
                  </div>
                </div>
              </a-tab-pane>
              <a-tab-pane key="2" tab="自定义信息">
                Content of Tab 2
              </a-tab-pane>
            </a-tabs>
          </a-card>
        </div>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import vueQr from 'vue-qr'
import FileDetail from '@/components/fileActions/FileDetail'
import { numFormat } from '@/utils/util'
import { productionReportingDetail } from '@/api/produce/index'
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: { customRender: 'name' },
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
    width: 80,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address 1',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column Long Column',
    dataIndex: 'address',
    key: 'address 2',
    ellipsis: true,
  },
  {
    title: 'Long Column Long Column',
    dataIndex: 'address',
    key: 'address 3',
    ellipsis: true,
  },
  {
    title: 'Long Column',
    dataIndex: 'address',
    key: 'address 4',
    ellipsis: true,
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 2 Lake Park, London No. 2 Lake Park',
    tags: ['loser'],
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park, Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
  },
];
export default {

  data () {
    return {
      data,
      columns,

      pageSizeOptions: ['10', '20', '30', '40', '50'],
      current: 1,
      total: 0,
      pageSize: 10,
      processId: '',
      reportId: '',
      jkeForm: {
        title: '报工详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      numFormat,
      detailData: {
        id: '222'
      },
      workOrderInfo: {
        reportUnqualifiedNum: 0,
        num: 0,
        unqualifiedVos: [],
        reportQualifiedNum: 0,
      },
    }
  },
  components: {
    crumbs,
    FileDetail,
    vueQr
  },
  watch: {
    'jkeForm.visible': function (val) {
      if (!val) {
        this.$emit('cancel')
      }
    },
  },
  computed: {
    percent () {
      let number =
        ((this.workOrderInfo.reportQualifiedNum + this.workOrderInfo.reportUnqualifiedNum) / this.workOrderInfo.num) *
        100
      return Math.floor(number * 100) / 100
    },
    processNum () {
      if (this.workOrderInfo) {
        let nums =
          this.workOrderInfo && this.workOrderInfo.reportQualifiedNum ? this.workOrderInfo.reportQualifiedNum : 0
        let num2 =
          this.workOrderInfo && this.workOrderInfo.reportUnqualifiedNum ? this.workOrderInfo.reportUnqualifiedNum : 0
        let sum = nums + num2
        let num3 = this.workOrderInfo && this.workOrderInfo.num ? this.workOrderInfo.num : 0
        return Math.floor(sum * 100) / 100 + '/' + Math.floor(num3 * 100) / 100
      } else {
        return 0 / 0
      }
    },
    unqualifiedString () {
      let list = ((this.workOrderInfo && this.workOrderInfo.unqualifiedVos) || []).map((item) => {
        return item.unqualifiedName + ':' + item.unqualifiedNum
      })
      return list.join()
    },
  },
  mounted () {
    // this.jkeForm.visible = true
  },
  methods: {
       // 分页
       onChangePage(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    onShowSizeChange(current, pageSize) {
      this.current = current
      this.pageSize = pageSize
      this.requestData(true)
    },
    initDetail (query) {
      this.jkeForm.visible = true
      let obj = {
        processId: query.processesId || query.processId,
        reportId: query.referencedId ? query.referencedId : query.id,
      }
      this.getDetail(obj)
    },
    getDetail (obj) {
      productionReportingDetail(obj).then((res) => {
        if (res.success) {
          if (res.result) {
            this.workOrderInfo = res.result
            let allocateType = this.$route.query.allocateType
            let allocateTypeText = '--'
            if (allocateType == 'receive') {
              allocateTypeText = '领料'
            } else if (allocateType == 'prepare') {
              allocateTypeText = '备料'
            }
            this.workOrderInfo.allocateTypeText = allocateTypeText
          }
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.box {
  display: flex;
  align-items: center;
  width: 100%;
  height: 206px;

  .box-column {
    flex: 1;
    height: 100%;

    .boeay {
      margin: 20px 0;
    }
  }

  .qr {
    flex: 0.5;
    display: flex;
    justify-content: end;
  }

}

.body-box {
  background: #f6f6f6;

  .num {
    display: flex;
    background: white;

    .box-num {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 206px;
      border-right: 1px solid #e8e8e8;

      &:last-child {
        border-right: none;
      }

      .topnum {
        font-size: 16px;
        font-weight: bold;

      }

      .bomnum {
        margin-top: 15px;
        font-size: 24px;

      }
    }

  }

  .body-table {
    background: white;
    margin-top: 10px;
  }
}
.parion{
  padding: 15px 12px 6px 43px;
  text-align: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
